<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*重新设置样式*/
    .form-control {
        width: 196px !important;
        height: 34px !important;
        padding: 10px !important;
    }

    #recommendtable {
        box-sizing: border-box !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
        color: #212529 !important;
        border-collapse: collapse !important;
        display: table !important;
        border-spacing: 2px !important;
        border-color: grey !important;
        text-align: left !important;
    }

    #recommendtable th {
        height: 50px;
    }

    #recommendtable tr {
        height: 35px;
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
        border-top-color: inherit;
        border-right-color: inherit;
        border-left-color: inherit;
        border-bottom: 2px #F3F1F1 solid;
    }

    #recommendtable td {
        font-size: 16px;
    }

    #recommendtable tr:nth-child(odd) {
        background: #FFFFFF !important;
    }

    #recommendtable tr:nth-child(even) {
        background: #FFFFFF !important;
    }

    .showinfo, .hideinfo {
        cursor: pointer;
        text-align: center;
    }

    /*.fixed-table-container .no-records-found>td:last-of-type{display:block !important;position:absolute;width:100%;}*/
    /*.fixed-table-container{height:auto !important;}*/
    /*p{margin-bottom:0;}*/
    /*table thead, tbody tr {*/
    /*display:table;*/
    /*width:100%;*/
    /*table-layout:fixed;*/
    /*}*/
    /*!**注释6.有事会错位，根据情况适当调整这里**!*/
    /*table thead {*/
    /*width: calc( 100% - 0.4em )*/
    /*}*/
</style>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1 th:if="${title} == null" style="display: inline-block">甲供件-外购件库库存查询</h1>
    <h1 th:if="${title != null }" style="display: inline-block" th:text="${title}"></h1>
    <h1 th:if="${title} != null and ${totalPrice} != null and ${#strings.contains(title,'集团物资部外购件库（库存金额')} == false" style="display: inline-block">&nbsp;&nbsp;总金额：</h1>
    <h1 th:if="${title} != null and ${totalPrice} != null and ${#strings.contains(title,'集团物资部外购件库（库存金额')} == false" style="display: inline-block" th:text="${totalPrice}"></h1>
    <h1 th:if="${title} != null and ${totalPrice} != null and ${#strings.contains(title,'集团物资部外购件库（库存金额')} == false" style="display: inline-block">万元</h1>
    <button th:if="${code} != null" onclick="javascript:window.history.back();" type="button" class="btn btn-success"
            style="text-align:center;vertical-align:middle;font-size:30px;position:absolute;right:3%;display: inline-block;background-color: transparent;border: none;color: #5c5c5c;outline:none;">
        <i style="-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;"
           class="glyphicon glyphicon-share-alt"></i><span
            style="margin-left: 5px;font-size: 16px;position: absolute;top: 20%;">返回</span>
    </button>
    <button th:if="${totalPrice} != null" onclick="javascript:window.history.back();" type="button"
            class="btn btn-success"
            style="text-align:center;vertical-align:middle;font-size:30px;position:absolute;right:3%;display: inline-block;background-color: transparent;border: none;color: #5c5c5c;outline:none;">
        <i style="-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;"
           class="glyphicon glyphicon-share-alt"></i><span
            style="margin-left: 5px;font-size: 16px;position: absolute;top: 20%;">返回</span>
    </button>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>项目编号</label>
                                    <input th:if="${code} != null" style="width: 123px" type="text" name="ityProCode"
                                           class="form-control"
                                           th:value="${code}">
                                    <input th:if="${code} == null" style="width: 123px" type="text" name="ityProCode"
                                           class="form-control"
                                           placeholder="请输入项目编号">
                                    <input name = "title" type="hidden" style="display: none" th:value="${title}">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>项目名称</label>
                                    <input style="width: 123px" type="text" name="ityProName" class="form-control"
                                           placeholder="请输入项目名称">
                                </div>
                                <!--<div class="form-group" style="margin-right: 10px; margin-bottom: 5px">-->
                                    <!--<label>SAP物料编码</label>-->
                                    <!--<input style="width: 210px" type="text" name="itySapCode" class="form-control"-->
                                           <!--placeholder="请输入SAP物料编码">-->
                                <!--</div>-->
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>物料描述</label>
                                    <input style="width: 210px" type="text" name="ityMatDesc" class="form-control"
                                           placeholder="请输入物料描述">
                                </div>
                                <!--<div class="form-group" style="margin-right: 10px; margin-bottom: 5px">-->
                                    <!--<label>跟踪号</label>-->
                                    <!--<input style="width: 108px" type="text" name="ityTrackCode" class="form-control"-->
                                           <!--placeholder="请输入跟踪号">-->
                                <!--</div>-->
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>区位</label>
                                    <input style="width: 108px" type="text" name="ityPosition" class="form-control"
                                           placeholder="请输入区位">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>供应商</label>
                                    <input style="width: 108px" type="text" name="supplier" class="form-control"
                                           placeholder="请输入供应商">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>合同编号</label>
                                    <input style="width: 108px" type="text" name="contractNo" class="form-control"
                                           placeholder="请输入合同编号">
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>在库类型</label>
                                    <select name="ityStockType" class="form-control"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width:80px!important;">

                                        <option th:if="${code }== null " value="" selected="selected">全部</option>
                                        <option th:if="${code }!= null or ${mode} != null" value="">全部</option>
                                        <option th:if="${mode }== 'inv'" selected="selected" value="1">库存在库</option>
                                        <option th:if="${mode }== 'inv'" value="2">项目在库</option>
                                        <option th:if="${mode }== 'pro'" value="1">库存在库</option>
                                        <option th:if="${mode} == 'pro'" selected="selected" value="2">项目在库</option>
                                        <option th:if="${mode} == null" value="1">库存在库</option>
                                        <option th:if="${mode} == null" value="2">项目在库</option>
                                    </select>
                                </div>
                                <div class="form-group" style="margin-right: 10px; margin-bottom: 5px">
                                    <label>仓库</label>
                                    <select id="ityWhiId" name="ityWhiId" class="selectpicker" multiple
                                            data-actions-box="true"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: auto!important;">
                                        <option th:if="${title} == null" selected="selected"
                                                th:each="warehouseInfo:${warehouseInfoList}"
                                                th:value="${warehouseInfo.whiId}"
                                                th:text="${warehouseInfo.whiName}"></option>

                                    </select>
                                    <input type="hidden" style="display: none" name="ityWhiIds"/>
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search">
                                    <span class="Bold">搜索</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="toolbar">
                    <button type="button" id="btn_exportExcel" style="width: 82px;height: 34px"
                            class="btn btn-primary">
                        导出
                    </button>
                    <img th:src="@{/img/downloadding.gif}" id="btn_tips" style="display: none"/>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table"
                           style="table-layout: fixed"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    var anxTable;
    var table4;
    var table;
    var title = [[${title}]];




    /** 延迟加载文件列表*/
    function delayLoading(ityId) {
        setTimeout(function () {
            getAnnexList(ityId);
        }, 500);
    }

    /**
     *@FunctionName: getAnnexList
     *@Description: 加载文件列表
     *@DesignIdea: 根据外购件库存表主键加载文件列表
     *@Author: 徐一贺
     *@CreateDate: 2020/5/28 12:41
     *@Phone: 18241927380
     *@Param: [ity] 外购件主键
     *@Version: v1.0.0
     */
    function getAnnexList(ityId) {
        js.post({
            url: ctx + "pInventoryInfoEdit/getAnnexList",
            data: {
                anxItyId: ityId
            },
            success: function (result) {
                $("#recommendtable tbody").html('');
                var tbodyHtml = '';
                var tableData = result.data;
                if (tableData.length > 0) {
                    $("#annex").show();
                } else {
                    $("#annex").hide();
                }
                for (var i = 0; i < tableData.length; i++) {
                    var download = '';
                    var remove = '';

                    tbodyHtml += ' <tr><td style="vertical-align: middle"><small><p style="line-height: 35px;padding-top:8px;word-wrap: break-word;width: 100%;">' + tableData[i].anxFileName + '</p></small></td>' +
                        '<td style="text-align: center"><small>' + tableData[i].anxFileSize + tableData[i].anxFileSizeUnit + '</small></td>' +
                        '<td style="text-align: center"><small>' + tableData[i].anxDownloadCount + '</small></td>' +
                        '<td style="text-align: center">' + download + remove +
                        '</td></tr>';
                }
                $("#recommendtable tbody").html(tbodyHtml);
            }
        })
    }

    function init() {
        $("#ityWhiId .actions-btn bs-deselect-all btn btn-default").trigger('click');
        $("#ityWhiId .actions-btn actions-btn bs-select-all btn btn-default").trigger('click');
        $("#ityWhiId").trigger('change');
        let ids = "";
        $("#ityWhiId option").each(function () {
            ids += $(this).val() + ",";
        })
        ids = ids.substring(0, ids.length - 1);
        $("#queryForm [name='ityWhiIds']").val(ids);
    }

    /**
     * 就绪函数
     */
    $(function () {
        $("title").html($("title").html() + " —— 外购件库存综合查询");
        init();
        /**
         * 加载列表
         */
        table = js.table.init({
            url: ctx + "jiaGongStockQuery/querylist",
            pageSize: 300,
            showColumns: true,
            showExport: false,
            columns: [
                {
                    title: '序号', field: 'ityId', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {
                    title: '物料描述',
                    field: 'ityMatDesc',
                    width: '120',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return '<p  style="word-wrap: break-word;width: 110px">' + value + '</p>';
                    }
                },
                // {
                //     title: 'SAP<br>物料编码',
                //     field: 'itySapCode',
                //     width: '85',
                //     sortable: true
                // },
                {
                    title: '数量',
                    field: 'ityNum',
                    width: '50',
                    sortable: true
                },
                {
                    title: '单位',
                    field: 'ityNumUnit',
                    width: '50',
                    sortable: true
                },//数量单位

                // {
                //     title: '品牌',
                //     field: 'ityBrand',
                //     width: '60',
                //     sortable: true, formatter: function (value, row, index) {
                //         if (value === null) {
                //             value = '--';
                //         }
                //         return value;
                //     }
                // },
                {
                    title: '项目编号',
                    field: 'ityProCode',
                    width: '82',
                    sortable: true,
                    formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }
                },
                {
                    title: '项目名称',
                    field: 'ityProName',
                    width: '120',
                    sortable: true,
                    formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return '<p  style="word-wrap: break-word;width: 110px">' + value + '</p>';
                    }
                },
                {
                    title: '供应商',
                    field: 'supplier',
                    width: '100',
                    sortable: true
                },
                {
                    title: '合同编号',
                    field: 'contractNo',
                    width: '85',
                    sortable: true
                },
                // {
                //     title: '跟踪号',
                //     field: 'ityTrackCode',
                //     width: '95',
                //     sortable: true
                // },
                {
                    title: '在库类型',
                    field: 'ityStockType',
                    width: '75',
                    sortable: true,
                    formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }else if (value ==1){
                            value = "库存在库";
                        } else if (value ==2){
                            value = "项目在库";
                        }

                        return  value ;
                    }
                },
                {
                    title: '备注',
                    field: 'ityRemark',
                    sortable: true
                },
                {
                    title: '仓库',
                    field: 'whiName',
                    sortable: true
                },
                //仓库外键--要显示对应的仓库名字：写数据库语句，建类，写JS（-function...）
                {
                    title: '区位',
                    field: 'ityPosition',
                    sortable: true
                },
                // {
                //     title: '机械<br>备件库<br>备注<br>类型',
                //     field: 'ityRemarkType',
                //     width: '70',
                //     sortable: true
                // },
                {
                    title: '记账日期',
                    field: 'ityBookkeepingDate',
                    width: '100',
                    sortable: true
                }
            ]
        });


        // $("#bootstrap-table").show();
        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });

        /**
         *@Description: 导出
         */
        $("#btn_exportExcel").click(function () {
            $("#btn_exportExcel").hide();
            $("#btn_tips").show();
            js.post({
                url: ctx + "jiaGongStockQuery/exportExcel",
                data: $("#queryForm").serialize(),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        location.href=ctx + "materialStockQuery/downloadExportExcel/"+result.data;
                    } else {
                        js.modal.warning("导出失败，请联系管理员！");
                    }
                    $("#btn_tips").hide();
                    $("#btn_exportExcel").show();
                }
            })
        });
        /**
         * 仓库改变事件
         */
        $("#ityWhiId").on('change', function () {
            $("#queryForm input[name='ityWhiIds']").val($("#ityWhiId").val());
        });

    });
</script>
</body>
</html>